<template>
  <div>
    <el-card>
      <!-- 新增试题 -->
      <el-row>
        <el-button style="float:right;margin-bottom:10px" type="success" size="small" icon="el-icon-edit" @click="$router.push('new')">新增试题</el-button>
      </el-row>

      <!-- 上部分-- 筛选区域 -->
      <el-form :model="choiceList" label-width="80px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="学科">
              <el-select style="width:100%;" v-model="choiceList.subjectID" placeholder="请选择" @change="subjectChangeFn">
                <el-option v-for="item in subjectList" :key="item.id" :label="item.subjectName" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="二级目录">
              <el-select style="width:100%;" v-model="choiceList.catalogID" placeholder="请选择" @change="onDirectoryChangeFn">
                <el-option v-for="item in directoryList" :key="item.id" :label="item.directoryName" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标签">
              <el-select style="width:100%;" v-model="choiceList.tags" placeholder="请选择">
                <el-option v-for="(item, index) in tagList" :key="index" :label="item.tagName" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关键字">
              <el-input v-model="choiceList.keyword"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="试题类型">
              <el-select style="width:100%;" v-model="choiceList.questionType" placeholder="请选择">
                <el-option v-for="(item, index) in questionType" :key="index" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="难度">
              <el-select style="width:100%;" v-model="choiceList.difficulty" placeholder="请选择">
                <el-option v-for="(item, index) in difficulty" :key="index" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="方向">
              <el-select style="width:100%;" v-model="choiceList.direction" placeholder="请选择">
                <el-option v-for="(item, index) in direction" :key="index" :label="item" :value="item"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="录入人">
              <el-select style="width:100%;" v-model="choiceList.creatorID" placeholder="请选择">
                <el-option v-for="(item, index) in userList" :key="index" :label="item.username" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="题目备注">
              <el-input v-model="choiceList.remarks"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="企业简称">
              <el-input v-model="choiceList.shortName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="城市">
              <el-select v-model="choiceList.province" style="width: 45%;margin-right: 5%;" placeholder="请选择市" @change="ProvinceChange">
                <el-option v-for="(value, key, index) in province" :key="index" :label="value" :value="value">
                </el-option>
              </el-select>
              <el-select v-model="choiceList.city" style="width: 50%;" placeholder="请选择区/县" @change="onDirectoryChangeFn">
                <el-option v-for="(value, key, index) in citys" :key="index" :label="value" :value="value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" style="text-align: right;">
            <el-form-item>
              <el-button size="small" @click="clearAll">清除</el-button>
              <el-button size="small" type="primary" @click="getchoiceListFn">
                搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <!-- 下部分 -->
      <!-- tab栏 -->
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick" style="margin-top: 10px">
        <el-tab-pane label="全部" name="first"></el-tab-pane>
        <el-tab-pane label="待审核" name="second"></el-tab-pane>
        <el-tab-pane label="已审核" name="third"></el-tab-pane>
        <el-tab-pane label="已拒绝" name="fourth"></el-tab-pane>
      </el-tabs>

      <!-- 消息提示 -->
      <el-alert :title="'数据一共 ' + total + ' 条'" type="info" show-icon :closable="false" style="margin-bottom:10px">
      </el-alert>

      <!-- 表格区域  -->
      <template>
        <el-table :data="itemList" style="width: 100%">
          <el-table-column prop="number" label="试题编号" width="280">
          </el-table-column>
          <el-table-column prop="subject" label="学科" width="180">
          </el-table-column>
          <el-table-column prop="catalog" label="目录" width="100">
          </el-table-column>
          <el-table-column prop="questionType" label="题型" width="100">
            <template slot-scope="scope">
              <div>
                <span v-if="scope.row.questionType === '1'">单选</span>
                <span v-else-if="scope.row.questionType === '2'">多选</span>
                <span v-else>简答</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="题干" width="280">
            <template slot-scope="scope">
              <div v-html="scope.row.question"></div>
            </template>
          </el-table-column>
          <el-table-column prop="addDate" label="录入时间" width="280">
            <template slot-scope="scope">
              {{ $dataFormat(scope.row.addDate) }}
            </template>
          </el-table-column>
          <el-table-column prop="difficulty" label="难度">
            <template slot-scope="scope">
              <div>
                <span v-if="scope.row.difficulty === '1'">简单</span>
                <span v-else-if="scope.row.difficulty === '2'">一般</span>
                <span v-else>困难</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="creator" label="录入人" width="180">
          </el-table-column>
          <el-table-column prop="chkState" label="审核状态" width="100">
            <template slot-scope="scope">
              <div>
                <span v-if="scope.row.chkState === 1">已审核</span>
                <span v-else-if="scope.row.chkState === 2">已拒绝</span>
                <span v-else>待审核</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="remarks" label="审核意见" width="280">
          </el-table-column>
          <el-table-column prop="chkUser" label="审核人" width="180">
          </el-table-column>
          <el-table-column prop="publishState" label="发布状态" width="80">
            <template slot-scope="scope">
              <div>
                <span v-if="scope.row.publishState === 0">下架</span>
                <span v-else>上架</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="240" fixed="right">
            <template slot-scope="scope">
              <div>
                <el-button type="text" @click="preview(scope.row)" size="mini">预览</el-button>
                <el-button type="text" :class="{ disabled: scope.row.chkState !== 0 }" :disabled="scope.row.chkState !== 0" size="mini" @click="checkQuestion(scope.row)">审核</el-button>
                <el-button type="text" @click="toEdit(scope.row)" size="mini" :class="{ disabled: scope.row.publishState === 1 }" :disabled="scope.row.publishState === 1">修改</el-button>
                <el-button type="text" @click="choiceAdd(scope.row, $event)" size="mini">{{
                    scope.row.publishState === 1 ? "下架" : "上架"
                  }}</el-button>
                <el-button type="text" @click="removeQuestion(scope.row)" size="mini" :class="{ disabled: scope.row.publishState === 1 }" :disabled="scope.row.publishState === 1">
                  删除
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </template>

      <!-- 分页区域 -->
      <el-pagination style="text-align: right; margin-top: 20px; margin-bottom: 15px;" background layout="prev, pager, next, sizes,jumper" :total="total" :current-page="choiceList.page" :page-sizes="[5, 10, 20, 30]" :page-size="choiceList.pagesize" @size-change="handleSizeChange" @current-change="handleCurrentChange" />

      <!-- 组件区域 -->

      <!-- 预览 -->
      <questions-preview :dialogVisible.sync="dialogVisible" @close="dialogVisible = false" :previewArr="questionItem"></questions-preview>
      <!-- 审核 -->
      <check-question :dialogVisible.sync="checkDialogVisible" @close="checkDialogVisible = false" :questionItem="questionItem"></check-question>
    </el-card>
  </div>
</template>

<script>
// 审核组件
import checkQuestion from '../components/questions-check'
// 预览组件
import questionsPreview from '../components/questions-preview.vue'
// 题库接口
import { choice, remove, choicePublish, detail } from '../../api/hmmm/questions.js'
// 学科接口
import { list as subjectListAPI } from '@/api/hmmm/subjects.js'
// 目录接口
import { list as directoryListAPI } from '@/api/hmmm/directorys.js'
// 标签接口
import { list as tagListAPI } from '@/api/hmmm/tags.js'
// 录入人接口
import { list } from '@/api/base/users.js'
// 地区文件
import { provinces, citys } from '@/api/hmmm/citys.js'
// 导入通用常量
import { difficulty, questionType, direction } from '@/api/hmmm/constants.js'
//

export default {
  data () {
    return {
      checkDialogVisible: false, // 审核试题的对话框
      dialogVisible: false, // 试题预览的对话框
      questionItem: {},
      activeName: 'first', // 标签页活动值
      // 表单数据列表
      choiceList: {
        page: 1, // 否1当前页数
        pagesize: 5, // 每页显示多少  /** */
        subjectID: null, // 学科
        difficulty: null, // 难度
        questionType: null, // 试题难度
        tags: null, // 标签名称
        province: null, // 企业所在地省份
        city: null, // 企业所在城市
        keyword: null, // 关键字
        remarks: null, // 题目备注
        shortName: null, // 企业简称
        direction: null, // 方向
        creatorID: null, // 录入人
        catalogID: null, // 目录
        chkState: null // 审核状态
      },
      citys: [], // 区域列表
      province: provinces(), // 城市列表
      itemList: [], // 精选试题列表
      total: 0, // 角色数据总条数
      subjectList: [], // 学科列表数据
      directoryList: [], // 目录列表数据
      tagList: [], // 标签列表
      userList: [], // 录入人列表
      direction, // 方向
      difficulty, // 难度
      questionType // 试题类型
    }
  },
  components: {
    // 预览组件
    questionsPreview,
    // 审核组件
    checkQuestion
  },
  created () {
    // 调用精选试题列表方法
    this.getchoiceListFn()
    // 调用学科列表
    this.subjectListFn()
    // 调用录入人方法
    this.entryPeopleListFn()
  },
  methods: {
    // 预览 试题
    async preview (item) {
      // 打开弹窗
      this.dialogVisible = true
      const { data } = await detail({ id: item.id })
      // 传入试题
      this.questionItem = data
    },

    // 修改试题
    toEdit (data) {
      this.$router.push(`/questions/new?id=${data.id}`)
    },

    // 上架和下架试题
    async choiceAdd (item, e) {
      const result = await this.$confirm('您确认' + e.target.innerText + '这道题目吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).catch(err => err)

      let data = {} // 下面用来接收返回的结果

      // 如果确认就加上架/下架 否则什么都不做
      if (result === 'confirm') {
        switch (e.target.innerText) {
          case '上架':
            data = await choicePublish({
              id: item.id,
              publishState: 1
            })
            break

          case '下架':
            data = await choicePublish({
              id: item.id,
              publishState: 0
            })
            break
        }

        if (data.status === 200) {
          this.$message.success(e.target.innerText + '成功')
        }
        // 更新题库列表
        this.getchoiceListFn()
      }
    },

    // 审核 试题
    checkQuestion (item) {
      // 打开审核窗口
      this.checkDialogVisible = true
      //
      this.questionItem = item
    },

    // 删除 试题
    async removeQuestion (item) {
      // 提示框
      const result = await this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      // 如果确认删除执行删除逻辑
      if (result === 'confirm') {
        const data = await remove(item)

        // 如果状态码是200表示删除成功
        if (data.status === 200) {
          this.getchoiceListFn()
          return this.$message.success('删除成功')
        }
      }
    },

    // 点击清除事件
    clearAll () {
      for (const key in this.choiceList) {
        if (key === 'page' || key === 'pagesize') {
          continue
        }
        this.choiceList[key] = null
      }
      // 移除目录和标签目录
      this.tagList = []
      this.directory = []
      // 更新题库列表
      this.getchoiceListFn()
      // tabs栏回到全部
      this.activeName = 'frist'
    },

    // 定义精选试题列表方法
    async getchoiceListFn () {
      // console.log(this.choiceList)
      const { data } = await choice(this.choiceList)
      // console.log(data)
      this.itemList = data.items
      // 数据条数
      this.total = data.counts
    },

    // 当市级发生变化时触发的函数
    ProvinceChange (val) {
      this.choiceList.city = ''
      this.citys = citys(val)
    },

    // 定义录入人数据列表 方法
    async entryPeopleListFn () {
      try {
        const { data: res } = await list()
        // console.log(res)
        this.userList = res.list
      } catch (error) {}
    },

    // 获取标签列表
    async getTagList () {
      const { data: res } = await tagListAPI({
        subjectID: this.choiceList.subjectID
      })
      // console.log(res)
      this.tagList = res.items
    },

    // 当目录发生改变时->重新获取标签
    onDirectoryChangeFn () {
      this.getTagList() // 调用方法
    },

    // 当学科发生改变时->重置数据 重新获取目录
    async subjectChangeFn (value) {
      // 标签  和 目录 重置
      this.choiceList.tags = ''
      this.choiceList.catalogID = ''
      // 传入学科的ID  获取对应学科的目录
      const { data: res } = await directoryListAPI({ subjectID: value })
      // console.log(res)
      // 接收
      this.directoryList = res.items
      // 清空 标签列表
      this.tagList = []
    },

    // 定义学科列表 方法
    async subjectListFn () {
      try {
        const { data } = await subjectListAPI()
        // console.log(data)
        this.subjectList = data.items
      } catch (error) {}
    },

    // 切换标签页事件
    handleClick () {
      // 查看接口文档发现
      // 审核状态: 0 待审核 1 已审核 2 已拒绝
      // 判断当前的tab栏页面 调整对应的审核状态 进行数据渲染
      if (this.activeName === 'first') {
        // 此时是全部标签页
        // 将chkState设为空 重新获取数据
        this.choiceList.chkState = null // 全部状态
        this.getchoiceListFn() // 重新获取列表
      } else if (this.activeName === 'second') {
        // 此时是待审核标签页
        // 将chkState设为空 重新获取数据
        this.choiceList.chkState = 0 // 待审核
        this.getchoiceListFn() // 重新获取列表
      } else if (this.activeName === 'third') {
        // 此时是已审核标签页
        // 将chkState设为空 重新获取数据
        this.choiceList.chkState = 1 // 已审核
        this.getchoiceListFn() // 重新获取列表
      } else {
        // 以上不是剩下的是已拒绝标签页
        // 将chkState设为空 重新获取数据
        this.choiceList.chkState = 2 // 已拒绝
        this.getchoiceListFn() // 重新获取列表
      }
    },

    // 每页显示的条数发生改变时触发
    handleSizeChange (newValue) {
      this.choiceList.pagesize = newValue
      this.getchoiceListFn()
    },

    // 当前页面发生改变时触发
    handleCurrentChange (newValue) {
      this.choiceList.page = newValue
      this.getchoiceListFn()
    }
  }
}
</script>
